<template>
    <div>
        <div style="margin: 10px 0 ">
            <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
<div>
    <div class="box1" >
        <div v-for="item in tableData" :key="item.id" class="box2">
        <img :src="item.img" style="height: 180px;width: 180px; margin: 0 10px;" />
        <div style="text-align:center;width: 100% ; font-size:15px"> {{item.name}}</div>
            <div class="box3">
               <div class="box4"><span style="font-size:15px" >￥</span>{{item.price}} </div>
                <div class="box5" @click="goto(item.id)"> 去购买</div>
            </div>
        </div>

    </div>
</div>
        <div style="padding: 10px 0;" >
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";
    export default {
        name: "User.vue",
        data(){
            return{
                pageNum:1,
                pageSize:10,
                tableData:[],
                total:6,

                dialogFormVisible:false,
                form: {

                },
                multipleSelection:[],
               name:"",
                roles:[],
            }
        },
        created() {
            this.load()
        },
        methods:{
            goto(id){
                localStorage.setItem("id",id)
                console.log(localStorage.getItem("id"))
                this.$router.push("/inform")

            },
            load(){
                request.get("/shop/page",{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        name:this.name,
                        id:this.id,
                        role:this.role
                    }
                }).then(res=>{
                    this.tableData=res.records
                    console.log(res.records)
                    this.total=res.total
                    console.log(this.form)
                })
                // fetch("http://localhost:9999/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username).then(res=>res.json()).then(res=>{
                //   this.tableData=res.data
                //   this.total=res.total
                // })
                request.get("/role").then(res=>{
                    this.roles=res
                })
            },
            handleSizeChange(pageSize){
                this.pageSize=pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                this.pageNum=pageNum
                this.load()
            },
            save(){
                this.dialogFormVisible = true
                this.form={}
            },
            saveTure(){
                request.post("/user",this.form).then(res=>{
                    if(res){
                        this.$message.success("保存成功")
                        this.dialogFormVisible=false
                        this.load()
                    }
                    else {
                        this.$message.error("保存失败")
                        this.dialogFormVisible=false
                        this.load()
                    }

                })
            },
            savaFalse(){
                this.dialogFormVisible=false
                this.form={}
            },


            reset(){
                this.name=""
                this.load()
            },

        }
    }

</script>

<style>
    .box1{
        margin-left: 20px;
        height: 600px;width: 1200px;
    }
    .box2{
        border-radius:15px;margin: 20px 20px;
        float:left;
        background-color:#fafbfa;
        border: 1px solid #959695;
        box-shadow:0 1px 4px #000;
        height: 260px;width: 200px;
    }
    .box3{
        color:#fafbfa;background-color:#ff5000;
        height:30px ;
        width: 170px;
        margin: 20px 10px  15px 15px;
        border-radius:5px;
    }
    .box4{
        margin-left: 5px;
        margin-top: 5px;
        height:30px ;
        width: 50px;
        align-items:flex-end;
        float: left;font-size:20px
    }
    .box5{
        background-color:#fedd92;
        height:30px ;
        width: 60px;
        float: right ;
        line-height: 35px;
        border-radius:0 5px 5px 0;
        font-weight:bold;
        text-align: center;
        cursor:pointer;
    }
</style>